<template>
  <div class="userEdit">
     <nav-bar>
        <template #left>
              <van-icon name="arrow-left" @click="backHome" />
          </template>
        <template #center> 
            账号管理
          </template>
     </nav-bar>
    <div class="input-item">
      <van-field v-model="nickName" label="昵称" placeholder="请输入昵称" />
      <van-field
        v-model="introduceSign"
        label="个性签名"
        placeholder="请输入签名"
      />
      <van-field v-model="password" label="密码" placeholder="请输入密码" />
    </div>
    <van-button
      type="primary"
      round
      color="#ffc400"
      class="save-btn"
      block
      @click="save"
    >
      保存
    </van-button>
    <van-button
      type="primary"
      round
      color="#ffc400"
      class="save-btn"
      block
      @click="logout"
      >退出登录</van-button
    >
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import NavBar from '../components/common/NavBar.vue'
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  name:"UserInfoEdit",
  components: { NavBar },
  setup() {
    const router = useRouter();
    let data = reactive({
      nickName: "",
      password: "",
      introduceSign: "长夜将至,我从今开始守望",
    });
    const logout = () => {
      localStorage.removeItem("isLogin");
      Toast("退出登录");
      router.push("/login");
    };
    // 保存
    const save = () => {
      if (data.nickName && data.password) {
        const userInfo = JSON.parse(localStorage.userInfo);
        const newUserInfo = {
          用户名: data.nickName || userInfo["用户名"],
          密码: data.password || userInfo["密码"],
        };
        localStorage.setItem("userInfo", JSON.stringify(newUserInfo));
        Toast("修改成功");
        router.push("/me");
      } else {
        Toast("请输入修改的内容");
      }
    };
    const backHome=()=>{
        router.back();
    }
    return {
      ...toRefs(data),
      save,
      logout,
      backHome
    };
  },
};
</script>
<style lang='less' scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
.save-btn {
  width: 80%;
  margin: 20px auto;
}
</style>